/*------------------------------------
table
------------------------------------*/

.vl-custom-table {
  border-spacing: 0 1em;
  border-collapse: separate;
  h6 {
    font-size: 16px;
    color: $gray-darker;
    margin-top: 0;
    padding-top: 0;
  }
  thead {
    th {
      vertical-align: middle;
      border-bottom: none;
      padding: 0.5rem 1.75rem;
    }
  }

  th,
  td {
    vertical-align: middle;
    border-top: none;
    font-family: $base-font;
  }

  td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-left: 1px solid $canvas-color;
  }
  td:last-child {
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-right: 1px solid $canvas-color;
  }

  tbody {
    td {
      background: $white;
      padding: 1.75rem;
      border-top: 1px solid $canvas-color;
      border-bottom: 1px solid $canvas-color;
    }
  }

  @media screen and (prefers-color-scheme: dark) {
    h6 {
      color: $dark-mode-gray-darker;
    }
    td:first-child,
    td:last-child {
      border-color: $dark-mode-border-color;
    }
    tbody .report-row-header > td {
      background-color: $dark-mode-bg;
      border-color: $dark-mode-border-color;
    }
    tbody .report-output-row > td {
      background-color: $dark-mode-bg;
      color: $dark-mode-fg;

      .report-view-box {
        color: $dark-mode-fg;
      }
    }
    tbody td {
      background-color: inherit;
    }
  }
}

.table-striped {
  td,
  th {
    vertical-align: middle;
  }
  tbody {
    tr:nth-of-type(odd) {
      background-color: rgba(0, 0, 0, 0.025);
    }
  }
}

.table {
  thead {
    th {
      border-bottom-width: 1px;
    }
  }
  .btn {
    white-space: nowrap;
  }

  @media screen and (prefers-color-scheme: dark) {
    thead,
    td {
      color: $dark-mode-fg;
    }
  }
}
